From 66cacaf725bf2030260cd311778813b05a92f3c0 Mon Sep 17 00:00:00 2001 From: Jakub Steiner Date: Wed, 29 Jul 2015 13:24:11 +0200 Subject: [PATCH] HC: provide explicit treeview styling deals with some details like: - DND stuff - progressbar - expanders - separators https://bugzilla.gnome.org/show_bug.cgi?id=752975 --- gtk/theme/HighContrast/_common.scss | 90 ++++++++++++++++++++++++++++- gtk/theme/HighContrast/gtk.css | 71 ++++++++++++++++++++++- 2 files changed, 158 insertions(+), 3 deletions(-) diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss index 9d1494b76e..f3edd2e31e 100644 --- a/gtk/theme/HighContrast/_common.scss +++ b/gtk/theme/HighContrast/_common.scss @@ -24,7 +24,6 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); -GtkToolItemGroup-expander-size: 11; -GtkExpander-expander-size: 16; - -GtkTreeView-expander-size: 11; -GtkTreeView-horizontal-separator: 4; @@ -941,6 +940,95 @@ GtkComboBox { /************** * Tree Views * **************/ +GtkTreeView.view { + -GtkTreeView-grid-line-width: 1; + -GtkTreeView-grid-line-pattern: ''; + -GtkTreeView-tree-line-width: 1; + -GtkTreeView-tree-line-pattern: ''; + -GtkTreeView-expander-size: 16; + + border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color, + border-top-color: $bg_color; // while this is the grid lines color, better then nothing + + &.rubberband { @extend .rubberband; } // to avoid borders being overridden by the previously set props + + &:selected { border-radius: 0; } // rest border radius in lists + + &:selected, &:backdrop:selected { + border-left-color: mix($selected_fg_color, $selected_bg_color, 50%); + border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly + } + + &:insensitive { + color: $insensitive_fg_color; + &:selected { + color: mix($selected_fg_color, $selected_bg_color, 40%); + &:backdrop { color: mix($selected_fg_color, $selected_bg_color, 50%); } + } + &:backdrop { color: insensitive_color; } + } + + &.separator:backdrop { + color: transparentize(black, 0.9); + } + + &:backdrop { + color: $backdrop_fg_color; + border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%); + border-top: $backdrop_bg_color; + } + + &.dnd { + border-style: solid none; + border-width: 1px; + border-color: mix($fg_color, $selected_bg_color, 50%); + } + + &.expander { + -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } + color: mix($fg_color, $base_color, 70%); + &:hover { color: $fg_color; } + &:selected { + color: mix($selected_fg_color, $selected_bg_color, 70%); + &:hover { color: $selected_fg_color; } + &:backdrop { color: mix($selected_fg_color, $selected_bg_color, 70%); } + } + + &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } + + &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); } + } + + &.progressbar { // progress bar in treeviews + color: $base_color; + + border: 1px solid $selected_borders_color; + border-radius: 4px; + background-color: $fg_color; + + &:selected { color: $selected_bg_color; } + + &:backdrop { + color: $selected_bg_color; + border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?) + background-color: $backdrop_base_color; + } + } + + &.trough { // progress bar trough in treeviews + background-color: transparentize($fg_color,0.9); + border-radius: 4px; + + &:selected { + background-color: transparentize($selected_fg_color, 0.7); + border-width: 1px 0; + border-style: solid; + border-color: $selected_bg_color; + } + } +} + column-header { .button { @extend %column_header_button; diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css index 1c30a28212..bf0ea9a2fd 100644 --- a/gtk/theme/HighContrast/gtk.css +++ b/gtk/theme/HighContrast/gtk.css @@ -43,7 +43,6 @@ -GtkScrolledWindow-scrollbars-within-bevel: 1; -GtkToolItemGroup-expander-size: 11; -GtkExpander-expander-size: 16; - -GtkTreeView-expander-size: 11; -GtkTreeView-horizontal-separator: 4; -GtkMenu-horizontal-padding: 0; -GtkMenu-vertical-padding: 0; @@ -105,7 +104,7 @@ color: #000; background-color: #fff; } -.rubberband { +.rubberband, GtkTreeView.view.rubberband { border: 1px solid #000; background-color: rgba(0, 0, 0, 0.2); } @@ -1182,6 +1181,74 @@ GtkComboBox { /************** * Tree Views * **************/ +GtkTreeView.view { + -GtkTreeView-grid-line-width: 1; + -GtkTreeView-grid-line-pattern: ''; + -GtkTreeView-tree-line-width: 1; + -GtkTreeView-tree-line-pattern: ''; + -GtkTreeView-expander-size: 16; + border-left-color: #7f7f7f; + border-top-color: #fff; } + GtkTreeView.view:selected { + border-radius: 0; } + GtkTreeView.view:selected, GtkTreeView.view:backdrop:selected { + border-left-color: #7f7f7f; + border-top-color: rgba(0, 0, 0, 0.1); } + GtkTreeView.view:insensitive { + color: #7f7f7f; } + GtkTreeView.view:insensitive:selected { + color: #666666; } + GtkTreeView.view:insensitive:selected:backdrop { + color: #7f7f7f; } + GtkTreeView.view:insensitive:backdrop { + color: insensitive_color; } + GtkTreeView.view.separator:backdrop { + color: rgba(0, 0, 0, 0.1); } + GtkTreeView.view:backdrop { + color: #000; + border-left-color: #7f7f7f; + border-top: #fff; } + GtkTreeView.view.dnd { + border-style: solid none; + border-width: 1px; + border-color: black; } + GtkTreeView.view.expander { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); + color: #4c4c4c; } + GtkTreeView.view.expander:dir(rtl) { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } + GtkTreeView.view.expander:hover { + color: #000; } + GtkTreeView.view.expander:selected { + color: #b2b2b2; } + GtkTreeView.view.expander:selected:hover { + color: #fff; } + GtkTreeView.view.expander:selected:backdrop { + color: #b2b2b2; } + GtkTreeView.view.expander:checked { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + GtkTreeView.view.expander:backdrop { + color: #4c4c4c; } + GtkTreeView.view.progressbar { + color: #fff; + border: 1px solid #000; + border-radius: 4px; + background-color: #000; } + GtkTreeView.view.progressbar:selected { + color: #000; } + GtkTreeView.view.progressbar:backdrop { + color: #000; + border-color: #000; + background-color: #fff; } + GtkTreeView.view.trough { + background-color: rgba(0, 0, 0, 0.1); + border-radius: 4px; } + GtkTreeView.view.trough:selected { + background-color: rgba(255, 255, 255, 0.3); + border-width: 1px 0; + border-style: solid; + border-color: #000; } + column-header .button { color: #7f7f7f; font-weight: bold; -- 2.30.2